<script lang="ts">
import { useModalBindHash } from '~/composables/url';
import { useAutoPopupController } from '~/composables/usePeriodicPopup';
import Item from './Item.vue';

export const attendance = useAntdModal(
  {
    // eslint-disable-next-line import/no-self-import
    is: defineAsyncComponent(() => import('./Attendance.vue')),
    type: 'body',
  },
  {
    title: null,
    maskClosable: true,
    width: 430,
    wrapClassName: 'ant-cover__Modal-attendance',
    centered: true,
    footer: null,
    closable: false,
    opener() {
      useModalBindHash({
        modalName: 'attendance',
        isOpen: () => !!attendance.modalProps.open,
        close: attendance.close,
        requireAuth: true,
        open: () => attendance.open(),
      });
    },
  },
);
</script>

<script setup lang="ts">
const emits = defineEmits<{
  close: [];
}>();
const container = ref(null);
const signQry = useQuery({
  queryKey: [apis.apiActivityDaily.id],
  queryFn: () => apis.apiActivityDaily(undefined),
});
const data = computed(() => signQry.data.value?.check_in_config ?? []);
const { deletePopup } = useAutoPopupController();
function onRefresh() {
  signQry?.refetch();
}

function onScrolling() {
  const gradientRedElement = container?.value.querySelectorAll?.('.gradientRed');
  if (gradientRedElement.length > 0) {
    gradientRedElement[gradientRedElement.length - 1]?.scrollIntoView?.({ behavior: 'smooth', block: 'center' });
  }
}
function Close() {
  emits('close');
  deletePopup('attendance');
}

onMounted(() => {
  nextTick(() => {
    onScrolling();
  });
});
</script>

<template>
  <div>
    <div class="head relative min-h-118px lt-tabletl:min-h-107px">
      <i class="i-solar:close-circle-outline absolute right-1 top-0 cursor-pointer text-7 text-white font-900" @click="Close()" />
      <div class="absolute top-6.5 w-74% px-5 text-lg font-900 lt-tabletl:(text-16px font-900 leading-none)">
        <div>{{ $t('7iUs75tamwipLNljQf8B2') }}</div>
      </div>
      <div class="absolute top-20 mb-2 px-5 lt-tabletl:(top-15 text-12px)">
        <I18nT keypath="qWiUCj9rIVme7Zcooho6" tag="p">
          <template #currency>
            <span class="text-5 text-lime-300 font-600 leading-normal lt-tabletl:(text-4.5 leading-none)">1000 USDT </span>
          </template>
        </I18nT>
      </div>
    </div>
    <div class="main p-5 lt-tabletl:(p-3)">
      <div ref="container" class="grid grid-cols-5 gap-3 rounded-xl bg-sys-layer-a p-3 lt-tabletl:(max-h-280px gap-2 overflow-hidden overflow-y-auto)">
        <Item v-for="i in data" :key="i.day" :detail="i" @refresh="onRefresh" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.head {
  background: url('../../../assets/imgs/attendance/topbg.png') 50% / cover no-repeat;
}
.main {
  background: linear-gradient(90deg, #f96243 0%, #b91b1b 109.52%);
}
</style>

<style lang="scss">
.ant-modal-wrap.ant-cover__Modal-attendance {
  .ant-modal {
    .ant-modal-content {
      max-width: 440px;
      min-width: 360px;
      border-radius: 16px;
      padding: 0;
      overflow: hidden;
      position: relative;
      background: transparent;
    }
  }
}
</style>
